<template>
    <div class="liquid-dash-container" :style="{ width }">
        <div>
            <div :id="id" :class="className" :style="{ height, width }"></div>
            <div class="liquid_desc">{{props.titleText}}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import "echarts-liquidfill/src/liquidFill.js"; // 在需要水滴图的页面js引入
import * as echarts from "echarts";
import { PropType, markRaw, onMounted, ref,watch } from "vue";
import { TypeMyLiquidFillData } from "./liquid_dash_type";

//#region defineXxx
defineOptions({
    name: "Liquid_Dash",
});

const props = defineProps({
    id: {
        type: String,
        required:true
    },
    data: {
        type: Array as PropType<TypeMyLiquidFillData[]>,
        default: [
            {
                name: "4G",
                value: 0.8,
            },
        ],
    },
    backgroudColor: {
        type: String,
        default: "#EEF7FF",
    },
    waveAndBordColor: {
        type: String,
        default: "#4D70EE",
    },
    titleText: {
        type: String,
        default: "title_text",
    },
    className: {
        type: String,
        default: "",
    },
    width: {
        type: String,
        default: "64px",
    },
    height: {
        type: String,
        default: "64px",
    },
    // propC: {
    //     type: String as PropType<MyType>,
    //     required: true,
    // },
});

const emit = defineEmits<{
    event1: [para1: number, para2: string];
    event2: [para1: number, para2: string];
}>();
//#endregion

// console.log('props.waveAndBordColor',props.waveAndBordColor);

watch(props.data,()=>{
    // console.log('in liquid dash watch');
    // console.log(props.data);
    setupOption();
},{
    deep:true
})


const chart = ref<echarts.EChartsType>();
let option = {
    series: [
        {
            type: "liquidFill",
            name: "Liquid Fill",
            color: [props.waveAndBordColor], //波浪的颜色
            amplitude: "5%", //波浪的高度
            data: [
                {
                    name: props.data[0].name,
                    value: props.data[0].value,
                },
            ],
            radius: "95%",
            label: {
                formatter: function (param: any) {
                    // console.log('in formatter');
                    // console.log('in formatter',param.value);
                    return param.name + "\n\n" + parseInt(param.value * 100+"") + "%";
                },
                fontSize: 14,
                // color:"black"
                color: "black",
                insideColor: "#fff",
                fontWeight: "normal",
            },
            backgroundStyle: {
                borderWidth: 1, //边框宽度
                borderColor: props.waveAndBordColor, //边框颜色
                color: props.backgroudColor, //背景色
            },
            outline: {
                borderDistance: 5,
                itemStyle: {
                    borderWidth: 1,
                    borderColor: props.waveAndBordColor,
                    // shadowBlur: 20,
                    // shadowColor: "rgba(255, 0, 0, 1)",
                },
            },
        },
    ],
};


const setupOption=()=>{
    option.series[0].data=[
                {
                    name: props.data[0].name,
                    value: props.data[0].value,
                },
            ];
    chart.value!.setOption(option);
}

onMounted(() => {
    // 图表初始化
    chart.value = markRaw(
        echarts.init(document.getElementById(props.id) as HTMLDivElement)
    );

    // chart.value.setOption(option);
    setupOption();

    // 大小自适应
    window.addEventListener("resize", () => {
        chart.value!.resize();
    });
});
</script>
<style lang="scss" scoped>
.liquid-dash-container {
}

.liquid_desc {
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
}
</style>
